<template>
	<view>
		<uv-popup ref="popupRef" mode="center" :close-on-click-overlay="false" round="20rpx">
			<view class="popup">
				<view class="popup-title center">选择规格</view>
				<scroll-view scroll-y="true" style="height: 520rpx;">
					<view class="popup-main flex">
						<view class="popup-item flex" v-for="(item,index) in list" :key="index" @click="handleItemClick(item,index)">
								<image src="@/static/icon/select1.png"  v-if="!selectedItems.includes(item.title)" mode=""></image>
								<image src="@/static/icon/select2.png" v-else mode=""></image>
							<view>{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn flex">
					<view class="btn1 flex justify-center" @click="closePopup">取消</view>
					<view class="btn2 flex justify-center" @click="confirm">确定</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref, watch, onMounted } from 'vue'
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		multiple: {
			type: Array,
			default: () => []
		}
	});
	// 弹窗引用
	const popupRef = ref(null);
	const selectedItems = ref([]);
	selectedItems.value = [...props.multiple];
	
	// 关闭弹窗
	const closePopup = () => {
		popupRef.value?.close();
	};
	const emit = defineEmits(['standards'])
	// 处理选项点击
	const handleItemClick = (item) => {
		const index = selectedItems.value.indexOf(item.title);
		if (index === -1) {
			// 未选中，添加到选中列表
			selectedItems.value.push(item.title);
		} else {
			// 已选中，从选中列表移除
			selectedItems.value.splice(index, 1);
		}
	}
	// 确定
	const confirm = () => {
		popupRef.value?.close();
		emit('standards',[...selectedItems.value])
	}
	// 打开弹窗
	const openPopup = () => {
		popupRef.value?.open();
	};

	// 暴露方法给父组件
	defineExpose({
		open: openPopup,
		close: closePopup
	});
</script>

<style scoped lang="scss">
	.popup {
		width: 600rpx;
		height: 800rpx;
		padding: 54rpx 44rpx 44rpx;
		text-align: center;
		box-sizing: border-box;

		.popup-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.popup-main {
			flex-wrap: wrap;
			margin: 34rpx 0;

			.popup-item {
				width: 50%;
				font-size: 30rpx;
				margin-bottom: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}
		}

		.popup-btn {
			justify-content: space-evenly;
			margin-top: 50rpx;

			view {
				width: 240rpx;
				height: 90rpx;
				border-radius: 50rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.btn1 {
				border: 2rpx solid #E1E1E1;
			}

			.btn2 {
				color: #FFFFFF;
				background: linear-gradient(270deg, #39B54A 0%, #89D05F 100%);
			}
		}
	}
</style>